import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import { Statistics } from '@/models/connect';
import _ from 'lodash';
import styles from './sportsRecoveryStatistics.css';
import CommList from './commList';
import { sportsRecoveryExport } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';

const { TabPane } = Tabs;
interface SportsRecoveryStatisticsProps {
  statistics?: Statistics;
  loading?: boolean;
  dispatch: Dispatch<AnyAction>;
}

class SportsRecoveryStatistics extends Component<SportsRecoveryStatisticsProps> {
  constructor(props: SportsRecoveryStatisticsProps) {
    super(props);
    this.state = {
      visible: true,
      drugApi: 'statistics/sportsRecoveryList',
      detailsUrl: '/statistics/details/sportsRecoveryDetails', //跳转路径详情页
      expApi: 'statistics/drugListEx', //导出
    };
  }
  componentWillMount() {
    if (localStorage.getItem('isTrue')) {
      this.setState({
        visible: false,
      });
    }
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/sportsRecoveryStatistics',
      payload: { deviceTypeNo: this.props.deviceTypeNo },
    });
    localStorage.removeItem('isTrue');
  }
  render() {
    const { statistics = {} } = this.props;
    return this.state.visible && isMenuVisible('iot:sportsRecoveryLog:statistical') ? (
      <div className={styles['sports-container']} style={{ display: 'block' }}>
              
        <div className={styles['sports-top']}>
            <i>运动康复信息采集概览</i>
        </div>
              
        <div className={styles['sports-bottom']}>
          <div className={styles['sports-total-one']}>
            <p className={styles.sportsp}>今日采集</p>
            <span className={styles['sportsSpan']} style={{ marginLeft: '6%' }}>
              {statistics.dayCount}
              <label>条</label>
            </span>
          </div>
          <div className={styles['sports-total-two']}>
            <p className={styles.sportsp}>近一周采集</p>
            <span className={styles['sportsSpan']} style={{ marginLeft: '6%' }}>
              {statistics.weekCount}
              <label>条</label>
            </span>
          </div>
          <div className={styles['sports-total-three']}>
            <p className={styles.sportsp}>近30日采集</p>
            <span className={styles['sportsSpan']} style={{ marginLeft: '6%' }}>
              {statistics.monthCount}
              <label>条</label>
            </span>
          </div>
          <div className={styles['sports-total-four']}>
            <p className={styles.sportsp}>信息总量</p>
            <span className={styles['sportsSpan']} style={{ marginLeft: '6%' }}>
              {statistics.everyCount}
              <label>条</label>
            </span>
          </div>
        </div>
        <div className={styles['sport-center']}>
          {/* <img src={require('../../../../assets/images/infostatic/sportBg.png')} alt="" /> */}
        </div>
        {isMenuVisible('iot:sportsRecoveryLog:list') && (
          <div className={styles['change-box']} onClick={() => this.setState({ visible: false })}>
            <img src={require('@/assets/images/change.png')} alt="" />
          </div>
        )}
      </div>
    ) : (
      <CommList
        drugApi={this.state.drugApi}
        search={'iot:sportsRecoveryLog:businessInfo'}
        menuId={'iot:sportsRecoveryLog:exportList'}
        deviceTypeNo={this.props.deviceTypeNo}
        detailsUrl={this.state.detailsUrl}
        name="运动康复列表.xlsx"
        type={'1'}
        expApi={this.state.expApi}
        commListEx={sportsRecoveryExport}
      />
    );
  }
}
export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/sportsRecoveryStatistics'],
  statistics: statistics.statistics,
}))(SportsRecoveryStatistics);
